<template>

    <el-container class="layout-container-demo" style="height: 100vh; ">


        <el-menu active-text-color="rgb(64,158,255)" background-color="#304156" text-color="#fff" width="auto"
            class="el-menu-vertical-demo" :collapse="isCollapse" default-active="/system/sysUser" router>
            <!-- 导航菜单项一，系统管理 -->
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <message />
                    </el-icon><span>系统管理</span>
                </template>
                <el-menu-item index="/system/sysUser">用户管理</el-menu-item>
                <el-menu-item index="/system/sysRole">角色管理</el-menu-item>
                <el-menu-item index="/system/sysMenu">菜单管理</el-menu-item>
                <el-menu-item index="/system/sysDept">部门管理</el-menu-item>
                <el-menu-item index="/system/sysPost">岗位管理</el-menu-item>
                <el-sub-menu index="1-6">
                    <template #title><span>日志管理</span></template>
                    <el-menu-item index="/system/log/sysLoginLog">操作日志</el-menu-item>
                    <el-menu-item index="/system/log/operaLog">登录日志</el-menu-item>
                </el-sub-menu>


            </el-sub-menu>
            <!-- 导航菜单项二，审批设置 -->
            <el-sub-menu index="2">
                <template #title>
                    <el-icon><icon-menu /></el-icon><span>审批设置</span>
                </template>
                <el-menu-item index="/processSet/processTemplate">审批模板</el-menu-item>
                <el-menu-item index="/processSet/processType">审批类型</el-menu-item>
            </el-sub-menu>

            <!-- 导航菜单项三，审批管理 -->
            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon><span>审批管理</span>
                </template>
                <el-menu-item index="/processMgr/process">审批列表</el-menu-item>
            </el-sub-menu>

            <!-- 导航菜单项四，公众号菜单 -->
            <el-sub-menu index="4">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon><span>公众号菜单</span>
                </template>
                <el-menu-item index="/wechat/menu">菜单列表</el-menu-item>
            </el-sub-menu>
        </el-menu>



        <el-container>
            <el-header style="height:35px; margin-top: 5px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
                <!-- header 内容 -->
                <!-- 左侧按钮 -->
                <div class="header-left">
                    <el-icon size="20px" @click="isCollapse = !isCollapse">
                        <setting />
                    </el-icon>
                </div>
                {{ pageTitle  }}
                <!-- 右侧按钮 -->
                <div class="header-right">
                    <el-dropdown>
                        <el-icon size="25px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Home</el-dropdown-item>
                                <el-dropdown-item>GitHub</el-dropdown-item>
                                <el-dropdown-item>Docs</el-dropdown-item>
                                <el-dropdown-item @click="LogOut">Log Out</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>Tom</span>
                </div>
            </el-header>


            <el-main style="padding:30px 10px 10px 10px;"><!-- //上右下左 -->

                <el-scrollbar>
                    <RouterView></RouterView>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref, watch ,onMounted} from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';
const isCollapse = ref(true)
// 创建一个响应式引用，用于存储标题
const pageTitle = ref('');

// 获取当前路由
const route = useRoute();
const router = useRouter();
// 退出登录
const LogOut = () => {
//   localStorage.removeItem('token')
  router.push('/login')
}
// 根据路由前缀设置初始标题
onMounted(() => {
  updatePageTitle();
});

// 监听路由变化，更新标题
watch(() => route.path, () => {
  updatePageTitle();
});

// 更新标题的函数
function updatePageTitle() {
  if (route.path.startsWith('/system')) {
    pageTitle.value = '系统设置';
  } else if (route.path.startsWith('/processMgr')) {
    pageTitle.value = '审批管理';
  } else if (route.path.startsWith('/processTemplate')) {
    pageTitle.value = '审批设置';
  } else if (route.path.startsWith('/wechat')) {
    pageTitle.value = '公众号菜单';
  } 
  else {
    pageTitle.value = '默认标题';
  }
}

</script>

<style scoped>
/* 头部标签位置 */
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.header-right {
    display: flex;
    align-items: center;
    text-align: right;
    font-size: 12px;
}

.el-breadcrumb__item {
    font-size: 20px;
}

/*  */
a {
    text-decoration: none
}

.el-menu-vertical-demo:not(.el-menu--collapse),
.el-menu--vertical {
    /* width :200px; */
    min-height: 100%;
}

.layout-container-demo .el-header {
    position: relative;

    color: var(--el-text-color-primary);
}

span {
    color: white;
}

/* 1 选中后背景蓝色 */


.layout-container-demo .el-menu .el-sub-menu .el-menu-item:hover {
    background-color: aquamarine !important;
}

.layout-container-demo .el-sub-menu .el-menu-item.is-active {
    font-size: medium;
    color: #1c518e;
}
</style>